<template>
  <view class="list-bg order-other">
    <view class="list-title">订单信息
      <!--   非账期支付的 以及 账期支付且签收方式为提货码核销的订单展示订单二维码（提货码）   -->
      <button
        v-if="orderDetailData.showQRCode == 0 && ((orderDetailData.settleType == 1201 && orderDetailData.signWay == 3) || orderDetailData.settleType != 1201)"
        class="btn-order"
        :type="'default'"
        plain="true"
        @click.stop="QRDiloag"
      >订单二维码</button>
      <u-popup :show="show" mode="center" round="16rpx">
        <view class="qrcode-con">
          <QRCodeImg ref="qrCodeImg" :img-width="QRWidth" :qr-code-info="qrCodeInfo" />
          <view
            v-if="orderDetailData.verifyCode"
            class="verify-code"
          >
            提货码：{{ orderDetailData.verifyCode }}
          </view>
          <view class="popup-close">
            <u-icon
              name="close-circle"
              size="30"
              color="#a7a7a7"
              @click="close"
            />
          </view>
        </view>
      </u-popup>
    </view>
    <uni-list class="list-group" :border="false">
      <uni-list-item :right-text="orderDetailData.orderNo" :border="false">
        <text slot="header" class="row-header">订单编号：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.billDate" :border="false">
        <text slot="header" class="row-header">单据日期：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.customerName" :border="false">
        <text slot="header" class="row-header">客户名称：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.collectionTypeName" :border="false">
        <text slot="header" class="row-header">收款方式：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.sentTypeName" :border="false">
        <text slot="header" class="row-header">配送方式：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.invoiceStatusName" :border="false">
        <text slot="header" class="row-header">开票状态：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.xdAccount" :border="false">
        <text slot="header" class="row-header">下单账号：</text>
      </uni-list-item>
      <uni-list-item :right-text="orderDetailData.jsAccount" :border="false">
        <text slot="header" class="row-header">结算账号：</text>
      </uni-list-item>
    </uni-list>
    <uni-list v-if="isMore" :border="false">
      <uni-list-item v-if="spAccountString" :right-text="spAccountString" :border="false">
        <text slot="header" class="row-header">审批账号：</text>
      </uni-list-item>
    </uni-list>
    <uni-collapse v-else class="list-group-up" @change="change">
      <uni-collapse-item :border="false">
        <template #title>
          <uni-list :border="false">
            <uni-list-item :border="false">
              <text slot="header" class="row-header">审批账号：</text>
              <text slot="footer" class="row-footer">{{ moreStatusText }}</text>
            </uni-list-item>
          </uni-list>
        </template>
        <view class="list-group-up-con">
          <view class="img" />
          <view v-for="(item,index) in spAccountList" :key="index">
            <text class="flex-item">{{ item }}</text>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
import QRCodeImg from '@/components/QR-code'
export default {
  name: 'OrderProductMessage',
  components: {
    QRCodeImg
  },
  props: {
    orderDetailData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      QRWidth: 330,
      qrCodeInfo: '',
      show: false,
      moreStatusText: '展开',
      isMore: true,
      spAccountList: [],
      spAccountString: ''
    }
  },
  watch: {
    orderDetailData(newValue, oldValue) {
      this.qrCodeInfo = newValue.orderNo
      this.spAccountfn(newValue)
    }
  },
  methods: {
    /*二维码弹框*/
    QRDiloag() {
      this.show = true
    },
    close() {
      this.show = false
    },
    change(arr) {
      if (arr.length == 0) {
        this.moreStatusText = '展开'
      } else {
        this.moreStatusText = '收起'
      }
    },
    spAccountfn(newValue) {
      this.spAccountList = (newValue.spAccount).split(',')
      // this.spAccountList = ['shenpi001', 'shenpi002', 'shenpi003', 'shenpi004', 'shenpi005', 'shenpi006', 'shenpi007', 'shenpi008']
      if (this.spAccountList.length > 1) {
        this.isMore = false
      } else {
        this.isMore = true
        this.spAccountString = this.spAccountList.toString()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.order-other{
  position: relative;
  .btn-order{
    position: absolute;
    top:20rpx;
    right:20rpx;
    padding:0 20rpx;
    height: 48rpx;
    line-height: 44rpx;
    font-size:$uni-font-size-sm;
    color:$uni-orange;
    border-color:$uni-orange;
    border-radius:$uni-border-radius-lg;
  }
}
.row-header{
  font-size: $uni-font-size-sm;
  color: $uni-grey-999;
}
.row-footer{
  font-size: $uni-font-size-sm;
  color: $uni-orange;
}
.list-group-up-con{
  background:$uni-orange;
  border-radius:6rpx;
  color:#fff;
  margin:8rpx auto 0;
  padding:6rpx 0 10rpx;
  position: relative;
  clear: both;
  zoom: 1;
  .img{
    width: 18rpx;
    height: 18rpx;
    transform: rotate(45deg);
    background:$uni-orange;
    border-radius: 2rpx;
    position: absolute;
    top:-4rpx;
    right:30rpx;
  }
  .flex-item{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 54rpx;
    margin:0 20rpx;
    color:#fff;
    width:calc(25% - 40rpx);
    float: left;
    font-size: $uni-font-size-sm;
  }
}
.list-group-up-con:after{
  content:" ";
  display: block;
  height: 0;
  clear: both;
}
.qrcode-con{
  padding:40rpx;
  .verify-code{
    text-align: center;
  }
  .popup-close{
    position: absolute;
    bottom:-55px;
    left:50%;
    margin-left: -15px;
  }
}
</style>
